<template>
  <el-dialog
    :modal="false"
    :close-on-click-modal="false"
    width="70%"
    :visible.sync="visible"
  >
  <el-button type="primary"  v-print ="'#exportPdf'">打印</el-button>
    <div ref="exportPdf" id="exportPdf">
    <div class="title">北京市军休职工2022年1月增加养老金审批表</div>
    <div style="width:100%;height:20px">
    <div style="display: inline-block;margin-left:2%">个人编码：{{dataForm.personalCode}}</div>
    <div style="display: inline-block;margin-left:62%;">单位：元</div>
    </div>
    <!-- <div class="cont"> -->
      <!-- 第一行表格 五列 -->
      <div class="table">
          <div class="box">
            <div class="content1">姓名</div>
            <div class="content_border">{{dataForm.name}}</div>
            <div class="content1">性别</div>
            <div class="content_border">{{dataForm.sex}}</div>
            <div class="content1">出生年月</div>
            <div class="content_border">{{dataForm.birthDate}}</div>
            <div class="content1">参加工作时间</div>
            <div class="content_border" style="border-right: 1px solid #e9e9e9;">{{dataForm.workTime}}</div>
          </div>
      </div>
      <!-- 第二行表格 三列 2-4 -->
      <div class="table">
          <div class="box">
            <div class="content1">职工分类</div>
            <div class="content_border" style="width:160%">{{dataForm.workersClassification}}</div>
            <div class="content1">职务</div>
            <div class="content_border">{{dataForm.duties}}</div>
            <div class="content1">退休时间</div>
            <div class="content_border" style="border-right: 1px solid #e9e9e9;">{{dataForm.retirementTime}}</div>
        </div>
      </div>
      <div class="table">
        <!-- <div style="width:100%;height:80px;text-align: center;line-height: 40px;background-color: #fafafa;border-top:1px solid #e9e9e9;border-left: 1px solid #e9e9e9;border-bottom: 1px solid #e9e9e9;color:rgb(117, 117, 117);font-size: 14px;">
          <span>增加退休<br>补贴项目</span></div> -->
          <div class="box" >
            <div class="content1" style="width:100%;border-right: 1px solid #e9e9e9;;font-size: 18px;font-weight: 600;">增加退休补贴项目</div> 
          </div>
          <div class="box" >
            <div class="content1" style="width:100%">退休前身份</div>
            <div class="content_border" style="width:100%">{{dataForm.retirementStatus}}</div>
            <div class="content1" style="width:100%">原退休金</div>
            <div class="content_border" style="width:100%;border-right: 1px solid #e9e9e9;" >{{dataForm.totalMonthlyPension}}</div> 
          </div>
          <div class="box" >
            <div class="content1" style="width:100%">2022年增加养老金标准</div>
            <div class="content_border" style="width:100%">{{dataForm.ext1}}</div>
            <div class="content1" style="width:100%">调整待遇标准后退休金合计</div>
            <div class="content_border" style="width:100%;border-right: 1px solid #e9e9e9;">{{dataForm.ext3}}</div> 
          </div>
       
      </div>
      <div class="table">
        <!-- <td style="width:5%"><div style="width:100%;height:240px;text-align: center;line-height: 30px;background-color: #fafafa;border-top:1px solid #e9e9e9;border-left: 1px solid #e9e9e9;border-bottom: 1px solid #e9e9e9;color:rgb(117, 117, 117);font-size: 14px;">
          <span>呈<br>报<br>单<br>位<br>意<br>见</span></div></td> -->
          <div class="box" >
            <div class="content1" style="width:100%;border-right: 1px solid #e9e9e9;;font-size: 18px;font-weight: 600;">呈报单位意见</div> 
          </div>
          <div class="box" style="width:100%;height:240px;border-right: 1px solid #e9e9e9;">
            <div class="content_border" style="height:240px;width:100%;word-wrap:break-word;text-align: left;" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{dataForm.remarks}}<br><br><br>
            <div style="margin-left:67%;">同意按文件增加养老金：{{dataForm.ext1}}</div>
            <div style="margin-left:70%;">{{dataForm.phone}}：盖章</div>
            <div style="margin-left:70%;">{{dataForm.death}}</div></div>
        </div> 
      </div>
      <div class="table">
        <!-- <td style="width:5%"><div style="width:100%;height:160px;text-align: center;line-height: 20px;background-color: #fafafa;border-top:1px solid #e9e9e9;border-left: 1px solid #e9e9e9;border-bottom: 1px solid #e9e9e9;color:rgb(117, 117, 117);font-size: 14px;">
          <span>主<br>管<br>部<br>门<br>审<br>批<br>意<br>见</span></div></td> -->
          <div class="box" >
            <div class="content1" style="width:100%;border-right: 1px solid #e9e9e9;;font-size: 18px;font-weight: 600;">主管部门审批意见</div> 
          </div>
          <div class="box" style="width:100%;height:160px;border-right: 1px solid #e9e9e9;">
            <div class="content_border" style="height:160px;width:100%;text-align: left;"><h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              同意</h1>
            <div style="margin-left:70%;">{{dataForm.address}}军休办（中心）（盖章）</div>
            <div style="margin-left:70%;">{{dataForm.death}}</div></div>
        </div>
         
      </div>
      <div class="table">
        <!-- <td style="width:5%"><div style="width:100%;height:120px;text-align: center;line-height: 30px;background-color: #fafafa;border-top:1px solid #e9e9e9;border-left: 1px solid #e9e9e9;border-bottom: 1px solid #e9e9e9;color:rgb(117, 117, 117);font-size: 14px;">
          <span>备<br>注</span></div></td> -->
        <div class="box" >
            <div class="content1" style="width:100%;border-right: 1px solid #e9e9e9;font-size: 18px;font-weight: 600;">备注</div> 
          </div>  
        <td style="width:100%">
          <div class="box" style="height:120px;border-right: 1px solid #e9e9e9;">
            <div class="content_border" style="height:120px;width:100%"></div>
        </div>
        </td>   
      </div><br>
      <div style="font-weight: 600;">北京市军队离休退休安置事务中心制</div>
    <!-- </div> -->
  </div>
    
  </el-dialog>
  
</template>
<script>

import html2canvas from 'html2canvas' // 转为图片
import printJS from 'print-js' // 打印
import print from 'vue-print-nb';
export default {
  data() {
    return {
      logoutDateDisabled: false,
      deathDisabled: false,
      deathTimeDisabled: false,
      postLevel: false,
      salaryClass: false,
      allowanceRatioClass: false,
      wageGradeClass: false,
      rensonClass: false,
      activeName: "first",
      visible: false,
      isTitle: "",
      isDisabled: false,
      visibleLine:"",
      isDisabled2:false,
      sfxs:"none",
     
      dataForm: {
        
        id: 0,
        areaCode: "",
        personalCode: "",
        name: "",
        sex: "",
        nation: "",
        politicalFace: "",
        idNo: "",
        birthDate: "",
        workTime: "",
        retirementTime: "",
        retirementStatus: "",
        duties: "",
        county: "",
        street: "",
        community: "",
        originalTroops: "",
        handoverPeriod: "",
        handoverTime: "",
        handoverMode: "",
        handoverBatch: "",
        workersClassification: "",
        reception: "",
        myStatus: "",
        inOutTime: "",
        deathTime: "",
        housingSituation: "",
        housingPropertyRight: "",
        leaseholder: "",
        housingArea: "",
        increasePension: "",
        totalMonthlyPension: "",
        death: "",
        workUnit: "",
        address: "",
        phone: "",
        remarks: "",
        workingYears: "",
        yuYue: "",
        workingYearsArmy: "",
        teachingAge: "",
        wageLevel: "",
        wageGrade: "",
        wageScale: "",
        treatmentStandard: "",
        personnelClassification: "",
        enjoyAllowance: "",
        specialAllowance: "",
        increaseProportion: "",
        renson: "",
        allowanceRatio: "",
        postLevel: "",
        salary: "",
        isImprove: "",
        retirementFeeProportion: "",
        senioritySalary: "",
        basicSalary: "",
        levelSalary: "",
        gradeSalary: "",
        salaryScale: "",
        bonusAllowance: "",
        serviceAllowance: "",
        seniorityAllowance: "",
        totalSubsidy: "",
        specialTeacherSubsidy: "",
        difficultySubsidy: "",
        raiseWages: "",
        retirementPayEightynine: "",
        retirementPayNinetytwo: "",
        retirementPayFirst: "",
        retirementPaySecond: "",
        retirementPayNinetyfive: "",
        retirementPayNinetyseven: "",
        retirementPayNinetysesec: "",
        retirementPayNinetynine: "",
        retirementPayNinetynisec: "",
        retirementPayZero: "",
        retirementPayOne: "",
        retirementPayOnenew: "",
        retirementPayOnsec: "",
        retirementPayThird: "",
        retirementPayThisec: "",
        retirementPayFive: "",
        retirementPaySix: "",
        foodAllowanceSeventynine: "",
        foodAllowanceEightyeight: "",
        oilAllowanceNightyone: "",
        oilAllowanceNightytwo: "",
        fuelLlowance: "",
        meatLlowance: "",
        oilAllowanceNightythird: "",
        livingAllowanceEightyfive: "",
        livingAllowanceEightyei: "",
        livingAllowanceNightytw: "",
        livingAllowanceNightyfo: "",
        livingAllowanceNightyfive: "",
        livingAllowanceNightysix: "",
        livingAllowanceNightysev: "",
        livingAllowanceNightyeig: "",
        livingAllowanceNightynig: "",
        livingAllowanceZero: "",
        livingAllowanceOne: "",
        livingAllowanceTwo: "",
        livingAllowanceThird: "",
        livingAllowanceFour: "",
        livingAllowanceSeven: "",
        specialGoveAllowanc: "",
        paperMoney: "",
        housingSubsidy: "",
        bathSubsidy: "",
        honorAllowance: "",
        otherIncome: "",
        jobSubsidy: "",
        ageAllowance: "",
        holidaySubsidy: "",
        retirementAllowanceOneo: "",
        growthMechanismSubsidy: "",
        workingYearsSubsidy: "",
        proportionalSubsidy: "",
        retirementAllowanceOneth: "",
        growthMechanismThirty: "",
        retirementAllowanceThirty: "",
        retirementPayFourty: "",
        logoutDate: "",
        heatingSubsidy: "",
        serviceSubsidy: "",
        pensionSixteen: "",
        pensionSeventeen: "",
        pensionEighteen: "",
        pensionNineteen: "",
        adjustTreatment: "",
        basicPension: "",
        pensionTwenty: "",
        pensionTwentyone: "",
        personType: "",
        ext1: "",
        ext3: ""
        
      },
      dataRule: {
        
      },
    };
  },
  created() {
        
  },
  computed: {
   
  },

  methods: {
    
    test(id) {
      this.visible = true;
      this.$http({
              url: this.$http.adornUrl(`/jxxm/adjustmentbasis/infoList`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                var datas = data.adjustmentBasis.tzgj;
                this.$http({
                  url: this.$http.adornUrl(
                    `/jxxm/retiredemployees/pension/${id}`
                  ),
                  method: "get",
                  params: this.$http.adornParams(),
                }).then(({ data }) => {
                  if (data && data.code === 0) {
                    this.dataForm.personalCode = data.retiredEmployees.personalCode
                    this.dataForm.name = data.retiredEmployees.name
                    this.dataForm.sex = data.retiredEmployees.sex
                    this.dataForm.birthDate = data.retiredEmployees.birthDate
                    this.dataForm.workTime = data.retiredEmployees.workTime
                    this.dataForm.workersClassification = data.retiredEmployees.workersClassification
                    this.dataForm.duties = data.retiredEmployees.duties 
                    this.dataForm.retirementTime = data.retiredEmployees.retirementTime
                    this.dataForm.retirementStatus = data.retiredEmployees.retirementStatus
                    this.dataForm.totalMonthlyPension = data.retiredEmployees.totalMonthlyPension
                    this.dataForm.ext1 = data.retiredEmployees.ext1
                    this.dataForm.ext3 = data.retiredEmployees.ext3
                    this.dataForm.phone = data.retiredEmployees.phone
                    this.dataForm.address = data.retiredEmployees.address
                    this.dataForm.death = data.retiredEmployees.death
                    this.dataForm.remarks =datas
                  }
                });
              }
            }) 
      
    },
    printHandle() {
      html2canvas(this.$refs.exportPdf, {
        backgroundColor: null,
        useCORS: true,
        windowHeight: document.body.scrollHeight
      }).then(canvas => {
        const url = canvas.toDataURL()
        this.img = url
        printJS({
          printable: url,
          type: 'image',
          documentTitle: ''
        })
      })
    },
    
  },
};
</script>

<style scoped lang="scss">
$titleColor: rgb(117, 117, 117);
$borderColor: 1px solid #e9e9e9;
.title {
  width: 100%; // 1200px
  margin: 0 auto;
  margin-top: 30px;
  padding: 20px 0;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  //background-color: #e1e1e1;
  // border: 1px solid #e1e1e1;
}
.title1 {
  width: 50%; // 1200px
  margin-left:10px;
  margin-top: 5px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  // text-align: center;
  //background-color: #e1e1e1;
  // border: 1px solid #e1e1e1;
}
.title2 {
  width: 50%; // 1200px
  margin-left:1200px;
  margin-top: 5px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  // text-align: center;
  //background-color: #e1e1e1;
  // border: 1px solid #e1e1e1;
}
.cont {
  border-right: $borderColor;
}
.table {
  width: 100%; // 1200px
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.lump {
  width: 20%;
}
.lump2 {
  width: 40%;
}
.lump2:nth-child(3),
.lump2:nth-child(6),
.lump2:last-child {
  width: 20%;
}
.box {
  width: 100%;
  height: 40px;
  display: flex;
  border-top: $borderColor;
  .content1 {
    width: 40%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fafafa;
    border-left: $borderColor;
    border-bottom: $borderColor;
    color: $titleColor;
    font-size: 14px;
  }
  .content2 {
    width: 60%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border-left: $borderColor;
    
    border-bottom: $borderColor;
    color: 000;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
  .content4 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fafafa;
    border-left: $borderColor;
    
    border-bottom: $borderColor;
    color: $titleColor;
    font-size: 14px;
  }
  // .content2:last-child {
  //   border-right: $borderColor;
  // }
  .content_border {
    width: 60%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border-left: $borderColor;
    
    border-bottom: $borderColor;
    color: 000;
    font-size: 14px;
    cursor: pointer;
    // overflow: hidden; //超出的文本隐藏
    //text-overflow: ellipsis; //溢出用省略号显示
    //white-space: nowrap; //溢出不换行
  }
  .content_border1 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border-left: $borderColor;
    
    border-bottom: $borderColor;
    color: 000;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }
}
// 三列样式
.content3 {
  width: 100%;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  border: $borderColor;
  border-right: none;
  color: 000;
  font-size: 14px;
  font-weight: 600;
}
// 四列样式
.lump4 {
  width: 100%;
  display: flex;
  // align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  border: $borderColor;
  border-top: none;
  border-right: none;
  .conttent4 {
    display: flex;
    align-items: center;
    width: calc(48% - 1px);
    height: 40px;
    line-height: 40px;
    border-right: $borderColor;
    background-color: #fff;
    text-align: left;
    cursor: pointer;
    white-space: nowrap; //溢出不换行
    &-title {
      color: $titleColor;
      padding-left: 12px;
    }
    &-txt {
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }
  }
  .conttent5 {
    display: flex;
    align-items: center;
    width: 52%;
    height: 40px;
    line-height: 40px;
    text-align: left;
    background-color: #fff;
    cursor: pointer;
    white-space: nowrap;
    &-title {
      padding-left: 12px;
      color: $titleColor;
    }
    &-txt {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .conttent6 {
    width: calc(48% - 1px);
    min-height: 100px;
    text-align: left;
    // border-right: $borderColor;
    background: #fff;
    border-top: none;
    cursor: pointer;
    // white-space: nowrap;
    &-title {
      color: $titleColor;
      padding: 12px;
    }
    &-txt {
      padding: 0 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    // 评价
    &-score {
      padding: 12px;
      &-title {
        color: $titleColor;
      }
      &-affirm {
        padding: 12px;
        padding-left: 0;
        ::v-deep .el-col {
          padding-bottom: 12px;
        }
        ::v-deep .el-col:last-child {
          padding-bottom: 0;
        }
      }
    }
  }
  .conttent7 {
    width: calc(52% - 30px);
    min-height: 100px;
    text-align: left;
    background: #fff;
    border-left: $borderColor;
    
    cursor: pointer;
    &-title {
      color: $titleColor;
      padding: 12px;
    }
    &-txt {
      padding: 0 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    // 签名
    &-sign {
      display: flex;
      align-items: center;
      padding: 12px;
      &-title {
        color: $titleColor;
      }
    }
  }
  .content11 {
    width: 10%;
    height: 120px;
    line-height: 40px;
    text-align: center;
    background-color: #fafafa;
    border-left: $borderColor;
    
    border-bottom: $borderColor;
    color: $titleColor;
    font-size: 14px;
  }
}
</style>